<template>
	<div class="totalStyle contractinfo_box">
		<div class="tablestyle">
			<div class="titleStyle">
				<p class="leftTitle font_w">字典管理</p>
				<div>
					<el-button type="success" @click="refreshDict">刷新数据缓存</el-button>
					<el-button type="primary" @click="handleBuild">新建</el-button>
				</div>
			</div>
			<div class="bottomBox">
				<div class="searchsize">
					<el-row :gutter="24" style="width: 100%;" class="searchBox flex">
						<el-col :span="4">
							<el-input v-model="queryParams.dictName" placeholder="请输入字典类型名称" clearable />
						</el-col>
						<el-col :span="4">
							<el-input v-model="queryParams.dictType" placeholder="请输入字典类型编号" clearable />
						</el-col>
						<el-col :span="4">
							<el-button type="info" plain @click="reset">重置</el-button>
							<el-button type="primary" plain class="searchbutton" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>
				<div class="chartstyle">
					<el-table :data="tableData" :header-cell-style="{ background: '#F2F5FA' }" border
						style="width: 100%;">
						<el-table-column prop="dictName" label="字典类型名称" />
						<el-table-column prop="dictType" label="字典类型编号" />
						<el-table-column label="状态" :width="100">
							<template #default="scope">
								<el-tag
									:type="scope.row.statusLabel == '在用' ? 'primary' : 'info'">{{scope.row.statusLabel === '在用' ? '在用' : '停用'}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="sortNum" label="排序号" />
						<el-table-column prop="remark" label="备注" />
						<el-table-column label="操作列" width="150" fixed="right" align="center">
							<template #default="scope">
								<span class="buttonFun cursor" @click="handleDictList(scope.row)">列表</span>
								<span class="buttonFun cursor" @click="handleEdit(scope.row)">编辑</span>
								<el-popconfirm width="520" confirm-button-text="确定" cancel-button-text="取消"
									@confirm="handleDelete(scope.row)" title="你确定要删除这条数据吗?">
									<template #reference>
										<span class="buttonFun cursor">删除</span>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty v-loading="tableLoading"></el-empty>
						</template>
					</el-table>
					<div class="demo-pagination-block">
						<el-pagination :current-page="queryParams.startPage" :page-size="queryParams.pageSize"
							:page-sizes="[5, 10, 15, 20]" :background="background"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		
		<el-dialog :close-on-click-modal="false" v-model="dictVisible" :title="title" width="500px">
			<detail ref="detailRef" />
			<template #footer>
				<div style="flex: auto">
					<el-button @click="dictVisible = false">取消</el-button>
					<el-button type="primary" @click="save">保存</el-button>
				</div>
			</template>
		</el-dialog>
		<el-drawer v-model="drawerVisible" title="列表" size="60%">
			<drawerList ref="drawerListRef" />
			<template #footer>
				<div style="flex: auto">
					<el-button @click="drawerVisible = false">关闭</el-button>
				</div>
			</template>
		</el-drawer>
		
		<!-- 详情 -->
		<!-- <Detail ref="detailRef" @callback="queryTableData(queryParams)"></Detail> -->
	</div>
</template>

<script setup name="tug">
	import api from '@/api/basicData/dict/index'
import detail from './component/index.vue'
import drawerList from './component/drawerList.vue'
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
	import {
		ref,
		onMounted,
		nextTick
	} from "vue";

const detailRef = ref() // 明细组件ref
const drawerListRef = ref()//明细列表
const dictVisible = ref(false)
const drawerVisible = ref(false)
const title = ref(null) // 抽屉标题
	const tableLoading = ref(false)
	const total = ref(0)
	const tableData = ref()
	const selects = ref({
		type: [
			{label:'个人',value:1},
			{label:'企业',value:2}
		]
	})
	const queryParams = ref({
		dictName: '',
		dictType: '',
		startPage: 1,
		pageSize: 10
	})

	//新增
	const handleBuild = () => {
		// detailRef.value.show({
		//   mode: 'add'
		// })
		dictVisible.value = true
		title.value = '新增'
		nextTick(() => {
			detailRef.value.resetForm() // 清空事件
			detailRef.value.formData.id = '' // 清空id
			detailRef.value.formData.status = '1';
		})
	}
	//重置
	const reset = () => {
		queryParams.value = {
			dictName: '',
			dictType: '',
			startPage: 1,
			pageSize: 10
		}
		queryTableData(queryParams.value)
	}
	//编辑
	const handleEdit = (row) => {
		dictVisible.value = true
		title.value = '编辑'
		nextTick(() => {
			detailRef.value.resetForm() // 清空事件
			api.getDictTypeById(row.id).then(res => {
				console.log('修改数据', res)
				detailRef.value.formData = res.data
			})
		})
	}
	
	// 字典类型保存
	const save = () => {
		detailRef.value.validate().then(result => {
			if (result) {
				const params = JSON.parse(JSON.stringify(detailRef.value.formData)) // 取到子组件的formData
				ElMessageBox.confirm(`确定保存？`, "保存", {
				  type: "info",
				  icon: 'QuestionFilled'
				}).then(_=>{
					if (params.id) {
						params.createTime = ''
						params.updateTime = ''
						api.updateDictType(params).then(res => {
							ElMessage.success({message:'保存成功'})
							dictVisible.value = false
							queryTableData(queryParams.value)
						})
					} else {
						api.insertDictType(params).then(res => {
							ElMessage.success({message:'保存成功'})
							dictVisible.value = false
							queryTableData(queryParams.value)
						})
					}
				}).catch(_=>{
					console.log("取消保存");
				})
			}else{
				ElMessage.warning({
					message: '请完善表单信息！'
				})
			}
		})
	}
	/** 字典列表操作 */
	const handleDictList = (row) => {
		drawerVisible.value = true
		nextTick(() => {
			drawerListRef.value.getData({dictType: row.dictType,dictName: row.dictName})
		})
	}
	//删除
	const handleDelete = (row) => {
		api.deleteDictTypeById(deleteRow.id).then((res) => {
			if (res.code === 200) {
			  ElMessage.success('删除成功')
			  queryTableData(queryParams.value)
			} else {
			  ElMessage.error(res.msg)
			}
		})
	}
	/** 刷新字典缓存 */
	const refreshDict = () => {
	  api.refreshDict().then(response => {
	    tableLoading.value = false;
	    if (response.code === 200) {
	      ElMessage.success('刷新成功')
	    } else {
	      ElMessage.error(response.msg)
	    }
	  })
	}
	//切换一页显示多少条数据
	const handleSizeChange = (val) => {
		queryParams.value.pageSize = val;
		queryTableData(queryParams.value);
	};
	// 点击跳转到第几页
	const handleCurrentChange = (val) => {
		queryParams.value.startPage = val;
		queryTableData(queryParams.value);
	};
	//查询
	const search = () => {
		queryParams.value.startPage = 1
		queryParams.value.pageSize = 10
		queryTableData(queryParams.value)
	}
	//查询
	const queryTableData = (e) => {
		tableLoading.value = true
		queryParams.value = e
		api.getAllDictTypeList(queryParams.value).then(res => {
			tableLoading.value = false
			tableData.value = res.data?.records || []
			total.value = res.data?.total || 0
		})
	}
	onMounted(() => {
		queryTableData(queryParams.value)
	})
</script>
<style lang='less' scoped>
	.tablestyle {
		position: relative;

		.inputBox {
			:deep(.el-input) {
				width: 200px;
			}
		}

		:deep(.el-table__header thead tr) {
			background-color: rgba(64, 158, 255, 0.1);
		}

		:deep(.el-col-3) {
			max-width: none;
		}
	}

	.contractinfo_box {
		:deep(.el-table--fit) {
			height: 100%;
		}

		:deep(.el-table__body-wrapper) {
			overflow-y: auto;
		}

		.tablestyle {
			position: relative;

			:deep(.el-table__header thead tr) {
				background-color: rgba(64, 158, 255, 0.1);
			}

			:deep(.el-col-3) {
				max-width: none;
			}
		}

		:deep(.customer-no-border-table .el-table--border, .el-table--group) {
			border: none;
		}

		.demo-pagination-block {
			margin-top: 16px;
			position: absolute;
			bottom: 32px;
			right: 32px;
		}

		.buttonFun {
			color: #2E83FC;
			font-size: 14px;
			margin-right: 8px;
		}

		.sircle {
			width: 6px;
			height: 6px;
			border-radius: 50%;

			display: inline-block;
			margin-bottom: 3px;
		}

		.blue {
			background-color: #2E83FC;
		}

		.green {
			background-color: #54B831;
		}

		.origin {
			background-color: #FFB929;
		}

		.origin_deep {
			background-color: #FF9458;
		}

		.red {
			background-color: #F46B5A
		}

		.bottomBox {
			padding: 16px;
			height: calc(100% - 48px);
		}
	}
</style>